<template>
  <A1Comp></A1Comp>
  <A2Comp></A2Comp>
</template>

<script setup>
  import { ref, provide, onMounted } from 'vue'
  import A1Comp from './A1Comp.vue'
  import A2Comp from './A2Comp.vue'

  const info = ref('hello vue3')
  provide('info', info)

  const changeInfo = (newInfo) => {
    info.value = newInfo
  }
  provide('changeInfo', changeInfo)

  onMounted(() => {
    setTimeout(() => {
      info.value = 'hello provide/inject'
    }, 2000)
  })

</script>

<style lang="less" scoped>

</style>
